<template>
  <view class="pages">
    <view class="prompt">客户姓名</view>
    <view class="cell">
      <view class="title">
        <input maxlength="10" v-model="form.customerName" placeholder="请输入客户姓名" />
      </view>
    </view>
    <view class="prompt">联系电话</view>
    <view class="cell">
      <view class="title">
        <input maxlength="11" type="number" v-model="form.customerPhone" placeholder="请输入联系电话" />
      </view>
    </view>
    <view class="prompt">身份证号码</view>
    <view class="cell">
      <view class="title">
        <input maxlength="18" type="idcard" v-model="form.customerCard" placeholder="请输入身份证号码" />
      </view>
    </view>
    <view class="hr"></view>
    <view class="cell" @tap="chooseSex">
      <viwe class="cell-left">性别</viwe>
      <viwe class="cell-right" :key="form.customerSex">
        <view>{{form.customerSex==1?'男':'女'}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="cell">
      <viwe class="cell-left">出生年月日</viwe>
      <viwe class="cell-right">
        <picker mode="date" value="YYYY-MM-DD" @change="ChangeCustomerBirthda">
          <view class="uni-input">{{form.customerBirthday||'请选择'}}</view>
        </picker>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="hr"></view>
    <view class="prompt">详细地址</view>
    <view class="cell">
      <view class="title">
        <input maxlength="50" v-model="form.customerAddress" placeholder="请输入详细地址" />
      </view>
    </view>
    <view class="hr"></view>
    <view class="cell" @tap="chooseAdress">
      <viwe class="cell-left">经纬度</viwe>
      <viwe class="cell-right">
        <view>{{form.customerLangitude||'请选择'}}{{','+form.customerLatitude}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="cell" @tap="addColleagues">
      <viwe class="cell-left">介绍人</viwe>
      <viwe class="cell-right">
        <view>{{form.upCustomerName||'请选择'}}</view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </viwe>
    </view>
    <view class="cell">
      <viwe class="cell-left">是否有小孩</viwe>
      <viwe class="cell-right">
        <uni-data-checkbox v-model="form.isChild" :localdata="options1"></uni-data-checkbox>
      </viwe>
    </view>
    <view class="cell">
      <viwe class="cell-left">是否是企业主</viwe>
      <viwe class="cell-right">
        <uni-data-checkbox v-model="form.isCompanyBoss" :localdata="options1"></uni-data-checkbox>
      </viwe>
    </view>
    <view class="hr"></view>
    <view class="cell">
      <view class="title">
        <input maxlength="200" v-model="form.remark" placeholder="请输入备注" />
      </view>
    </view>
    <view class="hr"></view>
    <view class="botton">
      <button class="botton-botton" @tap="submit">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 0,//0为提醒，1为日程
      form: {
        customerName: '',
        customerPhone: '',
        customerCard: '',
        customerBirthday: '',
        customerAddress: '',
        customerLangitude: '',
        customerLatitude: '',
        upCustomer: '',
        upCustomerName: '',
        isChild: 1,
        isCompanyBoss: 1,
        remark: '',
        customerSex: 1,
        id: ''
      },
      options1: [{ "value": 1, "text": "是" }, { "value": 0, "text": "否" }]
    }
  },
  onLoad() {
    const _this = this
    uni.getStorage({
      key: 'userinfo_key',
      success: function (res) {
        uni.removeStorage({ key: 'userinfo_key' });
        for (let key in _this.form) {
          _this.form[key] = res.data[key]
        }
        _this.form['isChild'] = _this.form['isChild'] * 1
        _this.form['isCompanyBoss'] = _this.form['isCompanyBoss'] * 1
        _this.form['customerSex'] = _this.form['customerSex'] * 1
      }
    });
  },
  onShow() {
    const _this = this
    uni.getStorage({
      key: 'user_key',
      success: function (res) {
        uni.removeStorage({ key: 'user_key' });
        _this.form.upCustomer = res.data.id
        _this.form.upCustomerName = res.data.customerName
      }
    });
  },
  methods: {
    /**选择周期*/
    chooseSex() {
      let _this = this
      let itemList = ['男', '女']
      uni.showActionSheet({
        itemList: itemList,
        success: function (res) {

          _this.form.customerSex = res.tapIndex + 1
          console.log(_this.form.customerSex);
        }
      });
    },
    ChangeCustomerBirthda(e) {
      this.form.customerBirthday = e.target.value
    },
    addColleagues() {
      uni.navigateTo({
        url: '/pages/common/userList'
      });
    },
    /**检验地址权限*/
    chooseAdress() {
      let vm = this
      uni.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
            uni.showModal({
              title: '',
              content: '需要获取你的地理位置，请确认授权',
              success: function (res) {
                if (res.cancel) {
                  uni.showToast({
                    title: '拒绝授权',
                    icon: 'none'
                  })
                } else if (res.confirm) {
                  uni.openSetting({
                    success: function (dataAu) {
                      if (dataAu.authSetting["scope.userLocation"] == true) {
                        vm.getLocation(dataAu)
                      } else {
                        uni.showToast({
                          title: '授权失败',
                          icon: 'none'
                        })
                      }
                    }
                  })
                }
              }
            })
          }
          // 初始化进入，未授权
          else if (res.authSetting['scope.userLocation'] == undefined) {
            vm.getLocation(res)
          }
          // 已授权
          else if (res.authSetting['scope.userLocation']) {
            vm.getLocation(res)
          }
        }
      })
    },
    getLocation() {
      uni.chooseLocation({
        success: (res) => {
          this.form.customerLangitude = res.longitude
          this.form.customerLatitude = res.latitude
        }
      })
    },
    /**提交信息*/
    submit() {
      let _this = this;
      if (!_this.form.customerName) {
        uni.showToast({
          title: '请输入客户姓名',
          icon: 'none'
        })
        return
      }
      if (!_this.form.customerPhone) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        })
        return
      }
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (!reg.test(_this.form.customerPhone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      if (!_this.form.customerAddress) {
        uni.showToast({
          title: '请输入地址',
          icon: 'none'
        })
        return
      }
      if (!_this.form.customerLangitude) {
        uni.showToast({
          title: '请选择经纬度',
          icon: 'none'
        })
        return
      }
      if (_this.form.id) {
        _this.$post('/sale/wx/customer/update_data', _this.form, true).then(res => {
          console.log(res.data);
          if (res.code * 1 === 200) {
            uni.showToast({
              title: '修改成功',
              icon: 'none'
            })
            setTimeout(() => {
              // uni.switchTab({
              //   url: '/pages/tabbar/CRM'
              // });
              uni.navigateBack({
                delta: 1
              });
            }, 1000)
          }
        })
        return
      }
      _this.$post('/sale/wx/customer/add_data', _this.form, true).then(res => {
        console.log(res.data);
        if (res.code * 1 === 200) {
          uni.showToast({
            title: '添加成功',
            icon: 'none'
          })
          setTimeout(() => {
            // uni.switchTab({
            //   url: '/pages/tabbar/CRM'
            // });
            uni.navigateBack({
              delta: 1
            });
          }, 1000)
        }
      })
    },
  }
}
</script>

<style lang="scss" scope>
.pages {
  padding: 10px 3vw;
}
.prompt {
  padding-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.cell {
  width: 94vw;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-right {
    display: flex;
    font-size: 16px;
    color: #96968e;
    align-items: center;
    .uni-icons {
      padding-left: 5px;
    }
  }
}
.title {
  height: 45px;
  width: 94vw;
  background: #f6f6f6;
  border-radius: 10px;
  font-weight: bold;
  input {
    width: 100%;
    height: 100%;
    padding-left: 10px;
  }
}
.hr {
  background: #ddd;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    border-radius: 20px;
    width: 70vw;
    color: #fff;
    background: #ed7467;
  }
}
</style>
